<script setup lang="ts">
import {http} from '@/utlis/http.ts'
   
    import { onMounted, ref } from 'vue'
    
    // // 分页参数
    // // 猜你喜欢的列表
    const guessList = ref(false)
    const onScrolltolower = ()=>{
          if(pageParam.value.page_num<pageParam.value.page_count){
              pageParam.value.page_num++
              uni.request({
    url: 'comment/matron/hot/',
    data: pageParam.value,
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    success: ({ data, statusCode, header }) => {
      guessList.value=data.list
      pageParam.value = data.count
      console.log('gg',guessList.value)
    },
    fail: (error) => {}
   })
    
          }
          else{
            
          }
    }
    const pageParam=ref({
      page_num:1,
      page_size:8,
      page_count:0 
    })
   uni.request({
    url: 'comment/matron/hot/',
    data: pageParam.value,
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    success: ({ data, statusCode, header }) => {
      guessList.value=data.list
      pageParam.value = data.count
      console.log('gg',guessList.value)
    },
    fail: (error) => {}
   })
    
    </script>
    
    <template>
      <!-- 猜你喜欢 -->
      <view class="m_box">
        <view class="caption">
          <text class="text">妈咪好评榜</text>
        </view>
        
          <view v-if="guessList" class="guess">
          <navigator
            class="comment_box"
            v-for="item in guessList"
            :key="item.id"
            :url="`/pages/detail/detail?id=${item.matron_id}`"
    
          >
           
                <view class="box_img">
          <img
                v-if="!(item.url_list.length==0)" 
              class="c_img"
              :src="item.url_list[0].url"
                mode="scaleToFill"
              />
          </view>
            
              <uni-rate
              v-model="item.star"
              size="20"
        readonly="true"
        margin="10px"
             
              :is-fill="false"
              :margin="5"
              />
              <view class="c_text">
                {{ item.comment }} 
              </view>
          
              <view class="c_user">
              <view style="display: flex; align-items: center;flex-grow: 1;">
                <image
                :src="item.user_img"
                class="user_img"
                mode="scaleToFill"
              />
              <text class="user_name">{{item.user_name}}</text>
              </view>
              <text class="user_date">{{item.create_date}}</text>
              </view>
          
          </navigator>
        </view>
        <view class="loading-text">
          {{ pageParam.page_num>=pageParam.page_count ? '没有更多数据~' : '正在加载...' }}
        </view>
      </view>
      
    </template>
    
    <style lang="scss">
    
    .m_box{
      margin: 0 3px;
      border-radius: 5px 5px 0 0;
      background-color: #fff;
    }
  :host {
    display: block;
  }
  .loading-text{
    text-align: center;
  }
  .guess{
  column-count: 2;
  column-gap: 1px;
  column-width: 325rpx;
  grid-column-start: span;
  .comment_box{
  
  height: auto;
  margin-top: 20rpx;
  margin: 7px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .box_img{
  min-height: 100px;
  max-height: 250px;
  overflow: hidden;
  width: 100%;	
  margin-bottom: 5px;
  .c_img{
    width: 100%;
  height: 100%;
  object-fit: fill;
  }
  }
  .c_text{
  
  display: -webkit-box;
  
  margin: 5px;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  color: rgba(0, 0, 0, 0.6);
  /*  */
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  letter-spacing: 0.1em;
  }
  .c_user{
  width: 100%;
  
  display: flex;
  align-items: center;
  border-top:0.5px solid rgba(0, 0, 0, 0.3);
  font-weight: 600;
  font-size: 9px;
  .user_img{
    margin: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  
  }
  .user_name{
    font-size: 10px;
    padding-left: 3px;
    font-weight: 700;
  }
  .user_date{
    flex-grow: 1;
    text-align: right;
    font-weight: 500;
    margin: 9px;
  color: rgba(0, 0, 0, 0.3);
  }
  }
  }
  }
  /* 分类标题 */
  .caption {
    display: flex;
    justify-content: center;
    line-height: 1;
   
    padding: 13px 0;
    font-size: 32rpx;
    color: #262626;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 28rpx 0 30rpx;
  
      &::before,
      &::after {
        content: '';
        width: 20px;
        height: 20px;
        background-image: url(@/static/hot.png);
        background-size: contain;
        margin: 0 10rpx;
      }
    }
  }
  
  
  /* 猜你喜欢 */
  
  
  page {
  background-color: #f7f7f7;
  height: 100%;
  
  }
    </style>
    